<template>
    <div>
        <a-modal
         v-model:visible="visible" 
         title="出入库记录"  
         @ok="handleOk" 
         @cancel="visible = false"
         class="inventoryRecords-add-edit-modal"
         width="100%"
         wrapClassName="full-modal"
         :footer="null"
        >
            <div v-if="visible">
                <a-form :form="form" layout="horizontal" class="add-edit-form" :key="formKey">
                    <a-form-item label="入库批号">
                        <span >{{ formState.frkph }}</span>
                    </a-form-item>
                    <a-form-item label="物料编号">
                        <span >{{ formState.fwlbh }}</span>
                    </a-form-item>
                    <a-form-item label="物料名称">
                        <span >{{ formState.fwlmc }}</span>
                    </a-form-item>
                    <a-form-item label="通用名称">
                        <span >{{ formState.ftymc }}</span>
                    </a-form-item>
                    <a-form-item label="规格">
                        <span >{{ formState.fgg }}</span>
                    </a-form-item>
                    <a-form-item label="库存数量">
                        <span >{{ formState.fkcsl }}</span>
                    </a-form-item>
                    <a-form-item label="数量单位">
                        <span >{{ formState.fsldw }}</span>
                    </a-form-item>
                    <a-form-item label="库存有效期">
                        <span >{{ formState.fyxq }}</span>
                    </a-form-item>
                    <a-form-item label="经销商名称">
                        <span>{{ formState.fjxsmc }}</span>
                    </a-form-item>
                    <a-form-item label="物料目录">
                        <span>{{ formState.fwlfl }}</span>
                    </a-form-item>
                    <a-form-item label="物料有效期">
                        <span >{{ formState.fwlyxq }}</span>
                    </a-form-item>
                    <a-form-item label="质量标准">
                        <span >{{ formState.fzlbz }}</span>
                    </a-form-item>
                    <a-form-item label="入库时间">
                        <span >{{ formState.frksj }}</span>
                    </a-form-item>
                </a-form>
                <commpVxeTable
                    :key="refreshTableKey"
                    :config="inventoryRecordsConfig" 
                    :columns="inventoryRecordsColumns"
                    :formItem="[]" 
                    :adaptiveHeight="true"
                    :isCanWrap="true"
                >
                </commpVxeTable>
            </div>
        </a-modal>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector.vue'
import serverEditingView from '@/components/comp-model-series/server-editing-view'
import moment from 'moment'
import YchConstant from "@/api/YchConstant";
import blobType from '@/common/blobType'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from '../service/api'
import { 
    spcyQyInfoqueryWlkcWjml, 
    spcyQyInfoUploadMoreTypeFile, 
    getFileTypeServe, 
    deleteFileById, 
    getCrossLocalFile, 
    spcyQyInfoqueryGyssjByWlIdList,
    spcyQyInfoqueryAllWlmlList,
    spcyQyInfoviewKc,
} from '../service/index'
export default {
    components:{
        serverEditingView,
        compSelector,
        commpVxeTable,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            formState:{},
            form: this.$form.createForm(this, { name: 'coordinated' }),
            rules:{
                fwlmlid: [{
                    required: true,
                    message: '请输入物料目录',
                    trigger: 'blur',
                }],
                fwlsjid: [{
                    required: true,
                    message: '请选择经销商名称',
                    trigger: 'blur',
                }],
                frkph: [{
                    required: true,
                    message: '请输入入库批号',
                    trigger: 'blur',
                }],
                fkcsl: [{
                    type:'number',
                    required: true,
                    message: '请输入库存数量',
                    trigger: 'blur',
                }],
                fyxq: [{
                    type:'object',
                    required: true,
                    message: '请选择库存有效期',
                    trigger: 'blur',
                }],
            },
            fjxxList:[],
            uploadLoading:false,
            dealerList:[],
            materialClassList:[],
            formKey:null,
            refreshTableKey:null,
            inventoryRecordsConfig:{
                api:assessCheckApi.spcyQyInfoviewKc,
                rowId: 'id',
                height:400,
                autoHidden:true,
                pageSize:10000,
                listData:'jlList',
                paramet:{
                    
                }
            },
            inventoryRecordsColumns:[{
                title: '入出库类型',
                field: 'frcklx',
            },{
                title: '操作人姓名',
                field: 'fczrxm',
            },{
                title: '操作数量',
                field: 'fczsl',
            },{
                title: '操作说明',
                field: 'fczsm',
            },{
                title: '操作时间',
                field: 'fczsj',
            }]
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        getData(val){
            this.formState = {}
            spcyQyInfoviewKc({id:val.id}).then(res=>{
                if(res.code == 200){
                    this.formState = res.result.kc
                    this.inventoryRecordsConfig.paramet = {id:this.formState.id}
                    this.formKey = Date.now()
                }else{
                    this.$message.warning(res.message)
                }
                this.refreshTableKey = Date.now()
            })
        },
    }
}
</script>
<style lang="less">
.inventoryRecords-add-edit-modal{
    .add-edit-form{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            display: flex;
            margin-bottom: 0;
        }
        .ant-form-item-label{
            width: 130px;
            font-weight: 600;
        }
        .ant-form-item-control-wrapper{
            width: 180px;
        }
        .flex-1-box{
            width: 100%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
    }
    .material-table{
        width: 100%;
        border-color: #d9d9d9 !important;
    }
}
.file-td-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: space-between;
    width: 104px;
    height: 104px;
    overflow: hidden;
    border-radius: 2px;
    border: 1px solid #d9d9d9;
    padding: 8px;
    margin: 8px;
    position: relative;
    .delete-icon-v{
        font-size: 16px;
        position: absolute;
        color: #ed5565;
        left: -60px;
        top: 3px;
    }
    .eye-icon-v{
        font-size: 16px;
        position: absolute;
        color: rgb(24, 144, 255);
        right: 11px;
        top: 38px;
    }
    .download-icon-v{
        width: 20px;
        font-size: 16px;
        position: absolute;
        color: rgb(24, 144, 255);
        right: 9px;
        top: 5px;
    }
    .download-icon-apply{
        top: 10px;
    }
    .fjbz-text-v{
        color: #ff8000;
        font-size: 12px !important;
        display: inline-block;
        width: 28px;
        position: absolute;
        top: 5px;
        left: 3px;
    }
    .file-icon-v{
        font-size: 42px;
        color: rgb(24, 144, 255);
    }
    .file-icon-v{
        font-size: 42px;
        color: rgb(24, 144, 255);
    }
    span{
        height: 40px;
        display:block;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 14px;
    }
}
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}
.ant-upload-list{
    display: none;
}
.ant-upload-list-item{
    display: none !important;
}
</style>